<template>
  <div class="zkc">

    <el-pagination
        :background="background"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :layout="layout"
        :page-sizes="pageSizes"
        :pager-count="pagerCount"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

<!--
官方介绍
https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/pagination.html#attributes
                                                                   默认值
background                   是否为分页按钮添加背景色                 false
current-page	               当前页数，支持 .sync 修饰符              1
page-sizes                   每页显示个数选择器的选项设置              [10, 20, 30, 40, 50, 100]
layout                       组件布局，子组件名用逗号分隔              'prev, pager, next, jumper, ->, total'
page-sizes                   每页显示个数选择器的选项设置              [10, 20, 30, 40, 50, 100]
pager-count	                 页码按钮的数量，当总页数超过该值时会折叠		7
total	                       总条目数


事件名称                	说明	                           回调参数
size-change           	pageSize 改变时会触发	           每页条数
current-change	        currentPage 改变时会触发	         当前页
prev-click	            用户点击上一页按钮改变当前页后触发	 当前页
next-click	            用户点击下一页按钮改变当前页后触发	 当前页
-->

  </div>
</template>

<script>
export default {
  name: "page",
  props: {
    total: {
      required: true,
      type: Number
    },
    page: { // 当前页
      type: Number,
      default: 1
    },
    limit: { // 页大小
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    // 移动端页码按钮的数量端默认值5
    pagerCount: {
      type: Number,
      default: document.body.clientWidth < 992 ? 5 : 7
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },


  },
  computed: {
    currentPage: {//当前页数
      get() {
        console.log("获取当前页")
        return this.page
      },
      set(val) {
        console.log("修改当前页")
        this.$emit('update:page', val)
      },
    },
    pageSize: { //每页显示个数选择器的选项设置
      get() {
        console.log("获取每页显示大小")
        return this.limit
      },
      set(val) {
        console.log("修改每页显示大小")
        this.$emit('update:limit', val)
      }
    },


  },
  methods: {
    handleSizeChange(val) {   //pageSize 改变时会触发	           每页条数
      console.log(`每页 ${val} 条`);
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)//  内容滚动到指定的坐标。
      }
    },
    handleCurrentChange(val) {  //currentPage 改变时会触发	         当前页
      console.log(`当前页: ${val}`);
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }





}
</script>

<style scoped>

</style>
